<!doctype html>
<html lang="en" data-theme="Balzac">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Balzac HTML Template</title>

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

        <!-- theme -->
        <link id="theme-css" rel="stylesheet" href="css/theme.css">
        <!--[if IE 9]><link rel="stylesheet" href="css/ie9.css"><![endif]-->

    </head>

    <body>

        <div class="bh-header" data-uk-sticky="{top:-1}">
            <div class="bh-navbar">

                <a class="bh-logo uk-visible-large" href="frontpage.html"><div class="uk-navbar-brand"><span class="uk-text-primary">Bal</span>zac</div></a>

                <a class="bh-logo-small uk-hidden-large" href="frontpage.html"><div class="uk-navbar-brand"><span class="uk-text-primary">Bal</span>zac</div></a>

                <!-- img use like this -->
                <!-- <a class="bh-logo" href="frontpage.html">
                    <img class="uk-responsive-height" src="" width="" height="">
                </a> -->

                <nav class="uk-navbar uk-text-center">
                    <div class="bh-navbar-nav-wrapper uk-visible-large">
                        <ul class="uk-navbar-nav">
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="frontpage.html" class="uk-active">Home</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li class="uk-nav-header">Styles</li>
                                        <li>
                                            <a href="?style=default">Light</a>
                                        </li>
                                        <li>
                                            <a href="?style=dark">Dark</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="#">Pages</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="pages-about.html">About Us</a>
                                        </li>
                                        <li>
                                            <a href="pages-team.html">Team</a>
                                        </li>
                                        <li>
                                            <a href="pages-service.html">Service</a>
                                        </li>
                                        <li>
                                            <a href="pages-portfolio.html">Portfolio</a>
                                        </li>
                                        <li>
                                            <a href="pages-contact.html">Contact</a>
                                        </li>
                                        <li>
                                            <a href="pages-faq.html">FAQ</a>
                                        </li>
                                        <li>
                                            <a href="pages-error.html">Error</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="shop.html">Shop</a>
                                <div class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-3">
                                    <div class="uk-grid uk-dropdown-grid">
                                        <div class="uk-width-medium-1-3">
                                            <ul class="uk-nav uk-nav-navbar">
                                                <li class="uk-nav-header">Layouts</li>
                                                <li>
                                                    <a href="shop-singleproduct.html">Single Product</a>
                                                </li>
                                                <li>
                                                    <a href="shop-cart.html">Cart</a>
                                                </li>
                                                <li>
                                                    <a href="shop-checkout.html">Checkout</a>
                                                </li>
                                                <li>
                                                    <a href="shop-wishlist.html">Wishlist</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="uk-width-medium-2-3">
                                            <div class="uk-panel">
                                                <div class="uk-panel-badge uk-badge uk-badge-danger">Only now - $99</div>
                                                <a href="shop-singleproduct.html"><img src="http://placehold.it/400x300&text=demo" width="400" height="300" alt="Product Image"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="#">Features</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="features-columns.html">Columns</a>
                                        </li>
                                        <li>
                                            <a href="features-positions.html">Positions</a>
                                        </li>
                                        <li>
                                            <a href="features-uikit-elements.html">UIkit Elements</a>
                                        </li>
                                        <li>
                                            <a href="features-theme-elements.html">Theme Elements</a>
                                        </li>
                                        <li>
                                            <a href="features-typography.html">Typhography</a>
                                        </li>
                                        <li>
                                            <a href="features-icons.html">Icons</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="blog.html">Blog</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="blog-singlepost.html">Single Post</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <a href="#offcanvas" class="uk-navbar-toggle uk-hidden-large" data-uk-offcanvas></a>

                </nav>

                <div class="bh-toolbar-left uk-visible-large">
                    <a class="bh-search-toggle" href="#" data-uk-toggle="{target:'.bh-search-bar', animation: 'uk-animation-slide-top'}"><i class="uk-icon-search"></i></a>
                </div>

                <div class="bh-toolbar-right">
                    <div class="uk-panel">
                        <ul class="uk-subnav uk-subnav-line">
                            <li>
                                <a href="#offcanvas-cart" data-uk-offcanvas><i class="uk-icon-shopping-cart uk-margin-small-right uk-hidden-small"></i> $209.80 <span class="uk-badge uk-badge-danger uk-badge-notification uk-margin-small-left">2</span></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="shop-wishlist.html"><i class=" uk-icon-heart"></i></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="#login" data-uk-modal><i class=" uk-icon-user"></i></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="#"><i class="uk-icon-power-off"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="bh-search-bar uk-hidden">
                <form class="uk-search" data-uk-search>
                    <input class="uk-search-field" type="search" placeholder="Search...">
                </form>
                <a href="#" class="uk-close" data-uk-toggle="{target:'.bh-search-bar'}"></a>
            </div>
        </div>

<div class="bh-position-title">
    <div class="uk-container uk-container-center">
        <div class="uk-panel">
            <h1>Columns</h1>
        </div>
    </div>
</div>

<div class="bh-position bh-position-default">
    <div class="uk-container uk-container-center">
    	<article class="uk-article">
    		<div class="uk-grid">

                <div class="uk-width-1-1">
                    <div class="uk-grid" data-uk-grid-margin>

                        <div class="uk-width-medium-1-1">
                            <h2 class="uk-h4">1/1</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien sed aliquam ullamcorper. Fusce magna dolor, aliquam nec quam vel, lacinia rhoncus odio. Nulla facilisi.</p>
                        </div>

                    </div>

                    <hr class="uk-grid-divider">

                    <div class="uk-grid uk-grid-divider" data-uk-grid-margin>

                        <div class="uk-width-small-1-2">
                            <h2 class="uk-h4">1/2</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien sed aliquam ullamcorper. Fusce magna dolor, aliquam nec quam vel, lacinia rhoncus odio. Nulla facilisi.</p>
                        </div>

                        <div class="uk-width-small-1-2">
                            <h2 class="uk-h4">1/2</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien sed aliquam ullamcorper. Fusce magna dolor, aliquam nec quam vel, lacinia rhoncus odio. Nulla facilisi.</p>
                        </div>

                    </div>

                    <hr class="uk-grid-divider">

                    <div class="uk-grid uk-grid-divider" data-uk-grid-margin>

                        <div class="uk-width-small-1-3">
                            <h2 class="uk-h4">1/3</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien sed aliquam ullamcorper.</p>
                        </div>

                        <div class="uk-width-small-1-3">
                        	<h2 class="uk-h4">1/3</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien sed aliquam ullamcorper.</p>
                        </div>

                        <div class="uk-width-small-1-3">
                            <h2 class="uk-h4">1/3</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien sed aliquam ullamcorper.</p>
                        </div>

                    </div>

                    <hr class="uk-grid-divider">

                    <div class="uk-grid uk-grid-divider" data-uk-grid-margin>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4">
                            <h2 class="uk-h4">1/4</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4">
                            <h2 class="uk-h4">1/4</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4">
                            <h2 class="uk-h4">1/4</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4">
                            <h2 class="uk-h4">1/4</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra sapien.</p>
                        </div>

                    </div>

                    <hr class="uk-grid-divider">

                    <div class="uk-grid uk-grid-divider" data-uk-grid-margin>

                        <div class="uk-width-small-1-2 uk-width-medium-1-5">
                            <h2 class="uk-h4">1/5</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-5">
                            <h2 class="uk-h4">1/5</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>

                        <div class="uk-width-small-1-3 uk-width-medium-1-5">
                            <h2 class="uk-h4">1/5</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>

                        <div class="uk-width-small-1-3 uk-width-medium-1-5">
                            <h2 class="uk-h4">1/5</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>

                        <div class="uk-width-small-1-3 uk-width-medium-1-5">
                            <h2 class="uk-h4">1/5</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>

                    </div>

                    <hr class="uk-grid-divider">

                    <div class="uk-grid uk-grid-divider" data-uk-grid-margin>

                        <div class="uk-width-small-1-2 uk-width-medium-1-6">
                            <h2 class="uk-h4">1/6</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-6">
                            <h2 class="uk-h4">1/6</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-6">
                            <h2 class="uk-h4">1/6</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-6">
                            <h2 class="uk-h4">1/6</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-6">
                            <h2 class="uk-h4">1/6</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-6">
                            <h2 class="uk-h4">1/6</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                    </div>

                    <hr class="uk-grid-divider">

                    <div class="uk-grid uk-grid-divider" data-uk-grid-margin>

                        <div class="uk-width-small-1-2 uk-width-medium-1-2 uk-width-large-1-10">
                            <h2 class="uk-h4">1/10</h2>
                            <p class="uk-hidden-large">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-2 uk-width-large-1-10">
                            <h2 class="uk-h4">1/10</h2>
                            <p class="uk-hidden-large">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4 uk-width-large-1-10">
                            <h2 class="uk-h4">1/10</h2>
                            <p class="uk-hidden-large">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4 uk-width-large-1-10">
                            <h2 class="uk-h4">1/10</h2>
                            <p class="uk-hidden-large">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4 uk-width-large-1-10">
                            <h2 class="uk-h4">1/10</h2>
                            <p class="uk-hidden-large">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4 uk-width-large-1-10">
                            <h2 class="uk-h4">1/10</h2>
                            <p class="uk-hidden-large">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4 uk-width-large-1-10">
                            <h2 class="uk-h4">1/10</h2>
                            <p class="uk-hidden-large">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4 uk-width-large-1-10">
                            <h2 class="uk-h4">1/10</h2>
                            <p class="uk-hidden-large">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4 uk-width-large-1-10">
                            <h2 class="uk-h4">1/10</h2>
                            <p class="uk-hidden-large">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                        <div class="uk-width-small-1-2 uk-width-medium-1-4 uk-width-large-1-10">
                            <h2 class="uk-h4">1/10</h2>
                            <p class="uk-hidden-large">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>

                    </div>

                </div>

            </div>
    	</article>
    </div>
</div>
            <footer class="bh-footer uk-text-center-small">
                <div class="uk-container uk-container-center uk-position-relative">
                    <a href="frontpage.html"><img src="http://placehold.it/60x60&text=demo" class="uk-margin-right" alt="Footer Logo" width="60" height="60" data-demo-style></a>
                    <span class="uk-hidden-small">
                        Copyright &copy; 2015 <a href="http://www.bahemian.com" target="_blank">Bahemian</a>. Built with so, so much love <i class="uk-icon-heart uk-text-primary uk-margin-small-left"></i>
                    </span>
                    <a class="bh-topscroller" data-uk-smooth-scroll href="#"><i class="uk-icon-angle-up"></i></a>
                </div>
            </footer>

            <div id="offcanvas" class="uk-offcanvas">
                <div class="uk-offcanvas-bar">
                    <form class="uk-search">
                        <input class="uk-search-field" type="search" placeholder="Search...">
                    </form>
                    <ul class="uk-nav uk-nav-offcanvas">
                        <li class="uk-parent">
                            <a href="frontpage.html">Home</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="?style=default">Light</a>
                                </li>
                                <li>
                                    <a href="?style=dark">Dark</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="#">Pages</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="pages-about.html">About us</a>
                                </li>
                                <li>
                                    <a href="pages-team.html">Team</a>
                                </li>
                                <li>
                                    <a href="pages-service.html">Service</a>
                                </li>
                                <li>
                                    <a href="pages-portfolio.html">Portfolio</a>
                                </li>
                                <li>
                                    <a href="pages-contact.html">Contact</a>
                                </li>
                                <li>
                                    <a href="pages-error.html">Error</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="shop.html">Shop</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="shop-singleproduct.html">Single Product</a>
                                </li>
                                <li>
                                    <a href="shop-cart.html">Cart</a>
                                </li>
                                <li>
                                    <a href="shop-checkout.html">Checkout</a>
                                </li>
                                <li>
                                    <a href="shop-wishlist.html">Wishlist</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="features.html">Features</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="features-columns.html">Columns</a>
                                </li>
                                <li>
                                    <a href="features-uikit-elements.html">UIkit Elements</a>
                                </li>
                                <li>
                                    <a href="features-theme-elements.html">Theme Elements</a>
                                </li>
                                <li>
                                    <a href="features-typography.html">Typhography</a>
                                </li>
                                <li>
                                    <a href="features-icons.html">Icons</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="blog.html">Blog</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="blog-singlepost.html">Single Post</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="offcanvas-cart" class="uk-offcanvas bh-offcanvas-light">
                <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
                    <div class="uk-panel">
                        <h3 class="bh-headline-bottom-border uk-margin-remove"><span>Cart</span></h3>
                        <table class="bh-offcanvas-shopping-cart uk-table uk-table-middle uk-margin-small-top uk-margin-bottom-remove">
                            <tbody>
                                <tr>
                                    <td>
                                        <a href="shop-singleproduct.html">
                                            <img src="http://placehold.it/100x75&text=demo" width="100" height="75" alt="Product Image">
                                        </a>
                                    </td>
                                    <td>
                                        <a class="bh-text-uppercase" href="shop-singleproduct.html">Workboots</a><br>
                                        $119.90
                                    </td>
                                    <td class="uk-text-center"><a href="#"><i class="uk-icon-times"></i></a></td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="shop-singleproduct.html">
                                            <img src="http://placehold.it/100x75&text=demo" width="100" height="75" alt="Product Image">
                                        </a>
                                    </td>
                                    <td>
                                        <a class="bh-text-uppercase" href="shop-singleproduct.html">Wayfarer Glasses</a><br>
                                        $89.90
                                    </td>
                                    <td class="uk-text-center"><a href="#"><i class="uk-icon-times"></i></a></td>
                                </tr>
                            </tbody>
                        </table>
                        <a href="shop-cart.html" class="uk-button uk-width-1-1">View Cart</a>
                        <a href="shop-checkout.html" class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-top">Go to Checkout</a>
                    </div>
                </div>
            </div>

            <div id="login" class="uk-modal">
                <div class="uk-modal-dialog">
                    <a class="uk-modal-close uk-close"></a>

                    <ul class="uk-tab uk-tab-grid" data-uk-tab="{connect:'#login-tab'}">
                        <li class="uk-width-small-1-2 uk-active"><a href="#">Login</a></li>
                        <li class="uk-width-small-1-2"><a href="#">Register</a></li>
                    </ul>

                    <ul id="login-tab" class="uk-switcher uk-margin">
                        <li class="uk-active">
                            <form class="uk-form">
                                <div class="uk-grid" data-uk-margin="{cls:'uk-margin-top'}">
                                    <div class="uk-width-1-1 uk-text-center">
                                        <h3>I'm already a member</h3>
                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr<br> sed diam nonumy eirmod tempor invidunt.</p>
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Username" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Password" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <label><input type="checkbox"> Remember me</label>
                                        <a class="uk-margin-left" href="#">Lost Password?</a>
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <button class="uk-button uk-text-center">Login</button>
                                    </div>
                                </div>
                            </form>
                        </li>
                        <li>
                            <form class="uk-form">
                                <div class="uk-grid" data-uk-margin="{cls:'uk-margin-top'}">
                                    <div class="uk-width-1-1 uk-text-center">
                                        <h3>I'm new here</h3>
                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr<br> sed diam nonumy eirmod tempor invidunt.</p>
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Username" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Password" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <button class="uk-button uk-text-center">Register</button>
                                    </div>
                                </div>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- vendor scripts -->
            <script src="assets/jquery.js"></script>
            <script src="assets/jquery.velocity.min.js"></script>
            <script src="assets/uikit/js/uikit.js"></script>
            <script src="assets/holder.js"></script>
            <script src="assets/countUp.js"></script>
            <script src="assets/uikit/js/components/accordion.min.js"></script>
            <script src="assets/uikit/js/components/grid.min.js"></script>
            <script src="assets/uikit/js/components/lightbox.min.js"></script>
            <script src="assets/uikit/js/components/search.min.js"></script>
            <script src="assets/uikit/js/components/slideshow.min.js"></script>
            <script src="assets/uikit/js/components/slideshow-fx.min.js"></script>
            <script src="assets/uikit/js/components/sticky.min.js"></script>
            <script src="assets/uikit/js/components/slider.min.js"></script>

            <!-- theme scripts -->
            <script src="js/theme.js"></script>

            <!-- demo related script - remove it!  -->
            <script src="demo.js"></script>
    </body>
</html>
